<template>
  <div class="Home">
    <!-- 点餐区域 -->

    <div class="box">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item v-for="item in category" :key="item.cid" :title="item.cname" @click="onChange(item.cid)" />
        </van-sidebar>
      </div>
      <div class="right" v-show="activeKey == 0">
        <!-- 第一个菜品 -->
        <van-card v-for="(item, index) in kinds" :key="item.did" :price="item.price" :num="item.num" :thumb="item.imgUrl">
          <template #title>
            <div style="font-size: 0.3rem; font-weight: 700">{{ item.title }}</div>
          </template>
          <template #desc>{{ item.detail }}</template>
          <template #footer>
            <van-button size="mini" type="primary" @click="cahngNum(1, item.num, item.price, item.did, item.categoryId)">+1</van-button>
            <van-button size="mini" type="primary" @click="cahngNum(-1, item.num, item.price, item.did, item.categoryId)">-1</van-button>
          </template>
        </van-card>
      </div>
      <div class="right" v-show="activeKey == 1">
        <van-card v-for="(item, index) in kinds" :key="item.did" :price="item.price" :num="item.num" :thumb="item.imgUrl">
          <template #title>
            <div style="font-size: 0.3rem; font-weight: 700">{{ item.title }}</div>
          </template>
          <template #desc>{{ item.detail }}</template>
          <template #footer>
            <van-button size="mini" type="primary" @click="cahngNum(1, item.num, item.price, item.did, item.categoryId)">+1</van-button>
            <van-button size="mini" type="primary" @click="cahngNum(-1, item.num, item.price, item.did, item.categoryId)">-1</van-button>
          </template>
        </van-card>
      </div>
      <div class="right" v-show="activeKey == 2">
        <van-card v-for="(item, index) in kinds" :key="item.did" :price="item.price" :num="item.num" :thumb="item.imgUrl">
          <template #title>
            <div style="font-size: 0.3rem; font-weight: 700">{{ item.title }}</div>
          </template>
          <template #desc>{{ item.detail }}</template>
          <template #footer>
            <van-button size="mini" type="primary" @click="cahngNum(1, item.num, item.price, item.did, item.categoryId)">+1</van-button>
            <van-button size="mini" type="primary" @click="cahngNum(-1, item.num, item.price, item.did, item.categoryId)">-1</van-button>
          </template>
        </van-card>
      </div>
      <div class="right" v-show="activeKey == 3">
        <van-card v-for="(item, index) in kinds" :key="item.did" :price="item.price" :num="item.num" :thumb="item.imgUrl">
          <template #title>
            <div style="font-size: 0.3rem; font-weight: 700">{{ item.title }}</div>
          </template>
          <template #desc>{{ item.detail }}</template>
          <template #footer>
            <van-button size="mini" type="primary" @click="cahngNum(1, item.num, item.price, item.did, item.categoryId)">+1</van-button>
            <van-button size="mini" type="primary" @click="cahngNum(-1, item.num, item.price, item.did, item.categoryId)">-1</van-button>
          </template>
        </van-card>
      </div>
      <div class="right" v-show="activeKey == 4">
        <van-card v-for="(item, index) in kinds" :key="item.did" :price="item.price" :num="item.num" :thumb="item.imgUrl">
          <template #title>
            <div style="font-size: 0.3rem; font-weight: 700">{{ item.title }}</div>
          </template>
          <template #desc>{{ item.detail }}</template>
          <template #footer>
            <van-button size="mini" type="primary" @click="cahngNum(1, item.num, item.price, item.did, item.categoryId)">+1</van-button>
            <van-button size="mini" type="primary" @click="cahngNum(-1, item.num, item.price, item.did, item.categoryId)">-1</van-button>
          </template>
        </van-card>
      </div>
    </div>

    <!-- 下面结算区域 -->

    <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
      <van-button round type="info" @click="delGoods">删除订单</van-button>
    </van-submit-bar>
  </div>
</template>

<script>
import { Toast, Dialog } from "vant";
export default {
  name: "Home",
  data() {
    return {
      activeKey: 0,
      category: [], //侧边栏数据
      kinds: [], //菜品
      totalPrice: 0, //总价
    };
  },
  mounted() {
    // 请求侧边栏数据
    this.$http.get("/user/category").then((res) => {
      this.category = res.data;
    });
    // 初始化第一次的数据
    this.onChange(1);

    // 请求商品总价
    this.$http.get("user/category/total").then((res) => {
      this.totalPrice = res.data.total * 100;
    });
  },
  methods: {
    // 切换侧边栏
    onChange(index) {
      // console.log("侧边索引切换,数据库返回的数据", index);
      // 发起请求拿到数据库数据
      this.$http.get("/user/category/kinds", { params: { id: index } }).then((res) => {
        this.kinds = res.data;
      });
    },
    // 改变数字
    cahngNum(val, num, price, did, categoryId) {
      //val 1或者-1,判断是增加还是减少.
      this.$http.get("/user/category/numbers", { params: { num: num, did: did, val: val, categoryId: categoryId } }).then((res) => {
        this.kinds = res.data;
      });
      // this.totalPrice = this.kinds.reduce(function (prev, cur, index) {
      //   return prev + cur.price * cur.num;
      // }, 0);
      // // 价格计算
      // this.totalPrice = (this.totalPrice + val * price) * 100;
      // console.log("总价", this.totalPrice);

      // 请求商品总价
      setTimeout(() => {
        this.$http.get("user/category/total").then((res) => {
          this.totalPrice = res.data.total * 100;
          console.log(this.totalPrice);
        });
      }, 300);
    },
    // 删除商品订单
    delGoods() {
      console.log("删除商品");
      this.$http.get("user/category/delete").then((res) => {
        // Toast.success("订单删除成功!");
        Dialog.confirm({
          title: "提示",
          message: "是否删除该订单!",
        })
          .then(() => {
            this.$router.go(0);
          })
          .catch(() => {});
      });
    },

    // 提交订单按钮
    onSubmit() {
      if (this.totalPrice <= 0) {
        Toast.fail("请先选择商品!");
        return;
      }
      console.log("提交的订单金额: ", this.totalPrice / 100);
      this.$router.push({ name: "Order", params: { totalPrice: this.totalPrice / 100 } });
    },
  },
};
</script>

<style lang="less" scoped>
@sidebar-width: 2rem;
@card-thumb-size: 3rem;
.Home {
  /deep/.van-card__price {
    font-size: 0.34rem;
    color: red;
  }
  /deep/.van-card__price-integer {
    font-size: 0.34rem;
  }
  /deep/.van-card__num {
    font-size: 0.32rem;
    color: black;
  }
  .van-sidebar-item,
  .van-sidebar-item--select,
  .van-sidebar {
    width: @sidebar-width;
  }

  .box {
    display: flex;
    width: 100%;
    min-height: 100vh;
    .left {
      position: fixed;
      width: 2rem;
      min-height: 100vh;
      left: 0;
      top: 0;
      border-right: 1px solid #cccccc60;
      background-color: #f7f8fa;
    }
    .right {
      flex: 1;
      margin-left: 2.02rem;
      margin-bottom: 1rem;
    }
  }
}
</style>
